<template>
  <div class="container">
    <div style="margin-bottom:10px" class="flex">
      <el-select v-model="username" placeholder="请选择归属" popper-class='sect' filterable @change="infoChange" style="margin-right:20px" size="mini">
        <el-option v-for="(item,index) in affiliation" :key="index" :label="`${item.username} - ${item.title}`" :value="item.id"></el-option>
      </el-select>
      <el-select v-model="batchId" placeholder="请选择批次" @change="selectBatch" popper-class='sect' size="mini">
        <el-option v-for="(item,index) in batchArr" :key="index" :label="item.batch" :value="item.id"></el-option>
      </el-select>
    </div>
    <div >
    <div class="ipad_table">
      <div class="control_box" v-show="controlData.appIconList.length != 0">
        <div class="header">系统桌面可见性图标管控</div>
        <el-table :data="controlData.appIconList" border style="width: 100%">
          <el-table-column prop="batch" min-width="80" label="批次" align="center"></el-table-column>
          <el-table-column prop="package_name" label="应用名称" min-width="140" align="center"></el-table-column>
          <el-table-column prop="package" label="包名" min-width="140" align="center"></el-table-column>
          <el-table-column prop="create_time" min-width="140" label="创建时间" align="center">
            <template slot-scope="scope">{{scope.row.create_time | newDate}}</template>
          </el-table-column>
        </el-table>
      </div>
      <div class="control_box" style="margin-top:20px" v-show="controlData.timeControlList.length != 0">
        <div class="header">平板可用时间管控</div>
        <el-table :data="controlData.timeControlList" border style="width: 100%">
          <el-table-column prop="batch" min-width="80" label="批次" align="center"></el-table-column>
          <el-table-column prop="start_time" label="开始时间" min-width="140" align="center"></el-table-column>
          <el-table-column prop="end_time" label="结束时间" min-width="140" align="center"></el-table-column>
          <el-table-column prop="create_time" min-width="140" label="创建时间" align="center">
            <template slot-scope="scope">{{scope.row.create_time | newDate}}</template>
          </el-table-column>
        </el-table>
      </div>
      <div class="control_box" style="margin-top:20px" v-show="controlData.whiteAppList.length != 0">
        <div class="header">应用白名单辅助管理</div>
        <el-table :data="controlData.whiteAppList" border style="width: 100%">
          <el-table-column prop="batch" min-width="80" label="批次" align="center"></el-table-column>
          <el-table-column prop="package_name" label="包名" min-width="140" align="center"></el-table-column>
          <el-table-column prop="create_time" min-width="140" label="创建时间" align="center">
            <template slot-scope="scope">{{scope.row.create_time | newDate}}</template>
          </el-table-column>
        </el-table>
      </div>
      <div class="control_box" style="margin-top:20px" v-show="controlData.otherSettingList.length != 0">
        <div class="header">系统及影音娱乐管控</div>
        <el-table :data="controlData.otherSettingList" border style="width: 100%">
          <el-table-column min-width="100" align="center" prop="batch" label="批次"></el-table-column>
          <el-table-column min-width="130" align="center" prop="qch_restore" label="恢复出厂设置开关">
            <template slot-scope="scope">{{scope.row.qch_restore == 1 ? '开启' : '关闭'}}</template>
          </el-table-column>
          <el-table-column min-width="130" align="center" prop="setting_call" label="电话通话功能">
            <template slot-scope="scope">{{scope.row.setting_call == 1 ? '开启' : '关闭'}}</template>
          </el-table-column>
          <el-table-column min-width="130" align="center" prop="setting_memory" label="扩展存储卡">
            <template slot-scope="scope">{{scope.row.setting_memory == 1 ? '开启' : '关闭'}}</template>
          </el-table-column>
          <el-table-column min-width="130" align="center" prop="setting_hotspot" label="wifi共享热点">
            <template slot-scope="scope">{{scope.row.setting_hotspot == 1 ? '开启' : '关闭'}}</template>
          </el-table-column>
          <el-table-column min-width="140" align="center" prop="setting_bluetooth" label="蓝牙数据功能开关">
            <template slot-scope="scope">{{scope.row.setting_bluetooth == 1 ? '开启' : '关闭'}}</template>
          </el-table-column>
          <el-table-column min-width="140" align="center" prop="setting_bhtvideo" label="蓝牙音频连接">
            <template slot-scope="scope">{{scope.row.setting_bhtvideo == 1 ? '开启' : '关闭'}}</template>
          </el-table-column>
          <el-table-column min-width="160" align="center" prop="setting_context" label="蓝牙名称"></el-table-column>
          <el-table-column min-width="130" align="center" prop="setting_navigation" label="系统导航条显示">
            <template slot-scope="scope">{{scope.row.setting_navigation == 1 ? '开启' : '关闭'}}</template>
          </el-table-column>
          <el-table-column min-width="130" align="center" prop="setting_statusbar" label="状态栏显示">
            <template slot-scope="scope">{{scope.row.setting_statusbar == 1 ? '开启' : '关闭'}}</template>
          </el-table-column>
          <el-table-column min-width="130" align="center" prop="setting_camera" label="摄像头开关">
            <template slot-scope="scope">{{scope.row.setting_camera == 1 ? '开启' : '关闭'}}</template>
          </el-table-column>
          <el-table-column min-width="130" align="center" prop="setting_clock" label="时钟功能开关">
            <template slot-scope="scope">{{scope.row.setting_clock == 1 ? '开启' : '关闭'}}</template>
          </el-table-column>
          <el-table-column min-width="130" align="center" prop="setting_recording" label="录音功能开关">
            <template slot-scope="scope">{{scope.row.setting_recording == 1 ? '开启' : '关闭'}}</template>
          </el-table-column>
          <el-table-column min-width="130" align="center" prop="setting_music" label="音乐功能开关">
            <template slot-scope="scope">{{scope.row.setting_music == 1 ? '开启' : '关闭'}}</template>
          </el-table-column>
          <el-table-column min-width="130" align="center" prop="setting_picture" label="图库功能开关">
            <template slot-scope="scope">{{scope.row.setting_picture == 1 ? '开启' : '关闭'}}</template>
          </el-table-column>
          <el-table-column min-width="130" align="center" prop="setting_wallpaper" label="壁纸功能开关">
            <template slot-scope="scope">{{scope.row.setting_wallpaper == 1 ? '开启' : '关闭'}}</template>
          </el-table-column>
          <el-table-column min-width="140" align="center" prop="setting_file" label="文件管理功能开关">
            <template slot-scope="scope">{{scope.row.setting_file == 1 ? '开启' : '关闭'}}</template>
          </el-table-column>
          <el-table-column min-width="140" align="center" prop="setting_browserInput" label="浏览器网址输入开关">
            <template slot-scope="scope">{{scope.row.setting_browserInput == 1 ? '开启' : '关闭'}}</template>
          </el-table-column>
          <el-table-column min-width="140" align="center" prop="setting_browser" label="浏览器功能开关">
            <template slot-scope="scope">{{scope.row.setting_browser == 1 ? '开启' : '关闭'}}</template>
          </el-table-column>
          <el-table-column min-width="130" align="center" prop="setting_phone" label="电话白名单">
            <template slot-scope="scope">{{scope.row.setting_phone == 1 ? '开启' : '关闭'}}</template>
          </el-table-column>
          <el-table-column min-width="170" align="center" prop="setting_usb" label="USB数据功能">
            <template slot-scope="scope">{{scope.row.setting_usb == 'usb_charge' ? '仅充电' : (scope.row.setting_usb == 'usb_mtp' ? 'MTP模式（媒体传输协议）' : 'Midi模式')}}</template>
          </el-table-column>
          <el-table-column min-width="140" align="center" prop="setting_tfmedia" label="影音娱乐功能管控">
            <template slot-scope="scope">{{scope.row.setting_tfmedia == 1 ? '开启' : '禁用'}}</template>
          </el-table-column>
          <el-table-column min-width="200" align="center" prop="setting_phones" label="电话白名单列表"></el-table-column>
          <el-table-column min-width="150" align="center" prop="createtime" label="创建时间">
            <template slot-scope="scope">{{scope.row.createtime| newDate}}</template>
          </el-table-column>
        </el-table>
      </div>
      <div class="control_box" style="margin-top:20px" v-show="controlData.browserAllList.length != 0">
        <div class="header">浏览器网址白名单</div>
        <el-table :data="controlData.browserAllList" border style="width: 100%">
          <el-table-column min-width="100" align="center" prop="batch" label="批次"></el-table-column>
          <el-table-column min-width="120" align="center" prop="white_addr" label="允许上网网址"></el-table-column>
          <el-table-column min-width="120" align="center" prop="black_addr" label="禁止上网网址"></el-table-column>
          <el-table-column min-width="120" align="center" prop="white_ip" label="IP白名单"></el-table-column>
          <el-table-column min-width="120" align="center" prop="black_ip" label="IP黑名单"></el-table-column>
          <el-table-column min-width="140" align="center" prop="create_time" label="创建时间">
            <template slot-scope="scope">{{scope.row.create_time | newDate}}</template>
          </el-table-column>
        </el-table>
      </div>
      <div class="control_box" style="margin-top:20px" v-show="controlData.labelAllList.length != 0">
        <div class="header">浏览器主页书签</div>
        <el-table :data="controlData.labelAllList" border style="width: 100%">
          <el-table-column min-width="140" align="center" prop="batch" label="批次"></el-table-column>
          <el-table-column min-width="180" align="center" prop="home_page" label="浏览器主页"></el-table-column>
          <el-table-column min-width="180" align="center" prop="label_page" label="书签管控设置"></el-table-column>
          <el-table-column min-width="140" align="center" prop="create_time" label="创建时间">
            <template slot-scope="scope">{{scope.row.create_time | newDate}}</template>
          </el-table-column>
        </el-table>
      </div>
      <div class="control_box" style="margin-top:20px" v-show="controlData.appControlList.length != 0">
        <div class="header">应用管理</div>
        <el-table :data="controlData.appControlList" border style="width: 100%">
          <el-table-column min-width="80" align="center" prop="app_batch" label="批次">
            <template slot-scope="scope">{{scope.row.app_batch == 0 ? '公共应用' : scope.row.app_batch}}</template>
          </el-table-column>
          <el-table-column min-width="100" align="center" prop="app_name" label="应用名称"></el-table-column>
          <el-table-column min-width="120" align="center" prop="app_package" label="应用包名"></el-table-column>
          <el-table-column min-width="80" align="center" prop="id" label="应用图标">
            <template slot-scope="scope">
              <div class="icon_img flex flex_cen"><img :src="scope.row.app_img" alt /></div>
            </template>
          </el-table-column>
          <el-table-column min-width="100" align="center" prop="id" label="是否允许滑动">
            <template slot-scope="scope">{{scope.row.is_slide ? '允许' : '禁止'}}</template>
          </el-table-column>
          <el-table-column min-width="100" align="center" prop="id" label="是否允许升级">
            <template slot-scope="scope">{{scope.row.is_upgrade ? '允许' : '禁止'}}</template>
          </el-table-column>
          <el-table-column min-width="100" align="center" prop="id" label="是否允许联网">
            <template slot-scope="scope">{{scope.row.is_network ? '允许' : '禁止'}}</template>
          </el-table-column>
          <el-table-column min-width="80" align="center" prop="id" label="开机自启">
            <template slot-scope="scope">{{scope.row.is_auto ? '允许' : '禁止'}}</template>
          </el-table-column>
        </el-table>
      </div>
      <div class="control_box" style="margin-top:20px" v-show="controlData.appScreenList.length != 0">
        <div class="header">应用霸屏</div>
        <el-table :data="controlData.appScreenList" border style="width: 100%">
          <el-table-column min-width="130" align="center" prop="batch" label="批次"></el-table-column>
          <el-table-column min-width="180" align="center" prop="app_name" label="默认霸屏应用"></el-table-column>
          <el-table-column min-width="160" align="center" prop="app_package" label="包名"></el-table-column>
          <el-table-column min-width="140" align="center" prop="create_time" label="创建时间">
            <template slot-scope="scope">{{scope.row.create_time| newDate}}</template>
          </el-table-column>
        </el-table>
      </div>
      <div class="control_box" style="margin-top:20px" v-show="controlData.appGroundAllList.length != 0">
        <div class="header">应用内部跳转管控</div>
        <el-table :data="controlData.appGroundAllList" border style="width: 100%">
          <el-table-column min-width="80" align="center" prop="batch" label="批次"></el-table-column>
          <el-table-column min-width="130" align="center" prop="app_name" label="应用名称"></el-table-column>
          <el-table-column min-width="160" align="center" prop="package" label="包名"></el-table-column>
          <el-table-column min-width="160" align="center" prop="address" label="域名/地址"></el-table-column>
          <el-table-column min-width="140" align="center" prop="create_time" label="创建时间">
            <template slot-scope="scope">{{scope.row.create_time| newDate}}</template>
          </el-table-column>
        </el-table>
      </div>
      <div class="control_box" style="margin-top:20px" v-show="controlData.appInsideList.length != 0">
        <div class="header">应用内部广告管控</div>
        <el-table :data="controlData.appInsideList" border style="width: 100%">
          <el-table-column min-width="80" align="center" prop="batch" label="SN码批次"></el-table-column>
          <el-table-column min-width="80" align="center" prop="app_name" label="应用名"></el-table-column>
          <el-table-column min-width="110" align="center" prop="package" label="包名"></el-table-column>
          <el-table-column min-width="180" align="center" prop="content" label="限制ID">
            <template slot-scope="scope">
              <div class="flex flex_cen flex-wrap">
                <div v-for="(item,index) in scope.row.content.split(',')" :key="index" style="width:50%">{{item}}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column min-width="130" align="center" prop="desc" label="说明"></el-table-column>
          <el-table-column min-width="140" align="center" prop="create_time" label="创建时间">
            <template slot-scope="scope">{{scope.row.create_time| newDate}}</template>
          </el-table-column>
        </el-table>
      </div>
      <div class="control_box" style="margin-top:20px" v-show="controlData.clearAppList.length != 0">
        <div class="header">应用缓存清理</div>
        <el-table :data="controlData.clearAppList" border style="width: 100%">
          <el-table-column min-width="160" align="center" prop="app_package" label="应用包名"></el-table-column>
          <el-table-column min-width="120" align="center" prop="sn_value" label="SN码"></el-table-column>
          <el-table-column min-width="120" align="center" prop="batch_id" label="批次"></el-table-column>
          <el-table-column min-width="140" align="center" prop="create_time" label="创建时间">
            <template slot-scope="scope">{{scope.row.create_time| newDate}}</template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    </div>
  </div>
</template>

<script>
import Facilitychart from '../components/facilityChart'
import Firmware from '../components/firmware'
import { getAscription, getBatchTwo, appIconList, timeControlList, whiteAppList, otherSettingList, browserAllList, labelAllList, appControlList, appScreenList, appGroundAllList, appInsideList, clearAppList } from "@/api/equipment.js";
import { getAndroidSize, getAndroidSizeten, RomVersionPer, deviceVersionPer, manageVersionPer } from "@/api/bordereaux.js";
export default {
  components: { Facilitychart, Firmware },
  data() {
    return {
      affiliation: [],
      username: '',
      batchId: '',
      batchArr: [],
      controlData: {
        appIconList: [], timeControlList: [], whiteAppList: [], otherSettingList: [], browserAllList: [], labelAllList: [],
        appControlList: [], appScreenList: [], appGroundAllList: [], appInsideList: [], clearAppList: []
      }
    }
  },
  created() {
    this.getAscriptions()
  },
  methods: {
    getBatchTwo(id) {
      getBatchTwo({ userId: id }).then(res => {
        this.batchArr = res.data
      }).catch(err => {
        this.batchArr = []
      })
    },
    infoChange(val) {
      this.batchArr = []
      this.getBatchTwo(val)
    },
    selectBatch(val) {
      this.getappIconList(val)
      this.gettimeControlList(val)
      this.getwhiteAppList(val)
      this.getotherSettingList(val)
      this.getbrowserAllList(val)
      this.getlabelAllList(val)
      this.getappControlList(val)
      this.getappScreenList(val)
      this.getappGroundAllList(val)
      this.getappInsideList(val)
      this.getclearAppList(val)
    },
    //设备维护获取归属用户信息
    getAscriptions() {
      getAscription({ userId: localStorage.getItem("ID") }).then(res => {
        //this.snParams = res.data.sort((a, b) => a.username.localeCompare(b.username))
        this.affiliation = res.data.sort((x, y) => {
          let reg = /[a-zA-Z0-9]/
          if (reg.test(x.username) || reg.test(y.username)) {
            if (x.username > y.username) {
              return 1
            } else if (x.username < y.username) {
              return -1
            } else {
              return 0
            }
          } else {
            return x.username.localeCompare(y.username)
          }
        })
      }).catch(err => {
        this.affiliation = []
      })
    },
    //排序
    dataSort(value) {
      let data = value.filter(item => item.value > 0).sort((a, b) => { return b.value - a.value })
      if (data.length > 3) {
        return data.splice(0, 3)
      } else {
        return data
      }
    },
    getappIconList(bId) {
      appIconList({ bId: bId }).then(res => {
        this.controlData.appIconList = res.data
      }).catch(err => {
        this.controlData.appIconList = []
      })
    },
    gettimeControlList(bId) {
      timeControlList({ bId: bId }).then(res => {
        this.controlData.timeControlList = res.data
      }).catch(err => {
        this.controlData.timeControlList = []
      })
    },
    getwhiteAppList(bId) {
      whiteAppList({ bId: bId }).then(res => {
        this.controlData.whiteAppList = res.data
      }).catch(err => {
        this.controlData.whiteAppList = []
      })
    },
    getotherSettingList(bId) {
      otherSettingList({ bId: bId }).then(res => {
        this.controlData.otherSettingList = res.data
      }).catch(err => {
        this.controlData.otherSettingList = []
      })
    },
    getbrowserAllList(bId) {
      browserAllList({ bId: bId }).then(res => {
        this.controlData.browserAllList = res.data
      }).catch(err => {
        this.controlData.browserAllList = []
      })
    },
    getlabelAllList(bId) {
      labelAllList({ bId: bId }).then(res => {
        this.controlData.labelAllList = res.data
      }).catch(err => {
        this.controlData.labelAllList = []
      })
    },
    getappControlList(bId) {
      appControlList({ bId: bId }).then(res => {
        this.controlData.appControlList = res.data
      }).catch(err => {
        this.controlData.appControlList = []
      })
    },
    getappScreenList(bId) {
      appScreenList({ bId: bId }).then(res => {
        this.controlData.appScreenList = res.data
      }).catch(err => {
        this.controlData.appScreenList = []
      })
    },
    getappGroundAllList(bId) {
      appGroundAllList({ bId: bId }).then(res => {
        this.controlData.appGroundAllList = res.data
      }).catch(err => {
        this.controlData.appGroundAllList = []
      })
    },
    getappInsideList(bId) {
      appInsideList({ bId: bId }).then(res => {
        this.controlData.appInsideList = res.data
      }).catch(err => {
        this.controlData.appInsideList = []
      })
    },
    getclearAppList(bId) {
      clearAppList({ bId: bId }).then(res => {
        this.controlData.clearAppList = res.data
      }).catch(err => {
        this.controlData.clearAppList = []
      })
    }
  }
}
</script>

<style scoped>
/deep/.el-carousel__item:nth-child(2n + 1) {
  background-color: #f9f9f9 !important;
}
/deep/.el-collapse-item__content {
  background-color: #f9f9f9;
}
/deep/.el-table tr {
  background-color: #f9f9f9;
}
/deep/.el-table th {
  background-color: #f9f9f9;
  font-weight: 500;
}
/deep/.el-table__empty-block {
  background-color: #f9f9f9;
}
</style>

<style scoped lang="scss">
.container {
  margin: 0 !important;
  font-family: 微软雅黑, MicrosoftYahei, sans-serif;
  color: #fff;
  background-color: #ffffff;
  background-size: 100% 100%;
  background-position: 0 0;
  background-repeat: no-repeat;
  width: 100%;
  min-height: 100vh;
  padding: 20px;
  //height: 100%;
}
.chart-wrapper {
  // background: #fff;
  padding: 16px 16px 0;
  margin-bottom: 32px;
  font-size: 14px;
}
.short_img {
  // background: url(../../../assets/images/amiddboxtbott2.png);
  //background-color: #2f3e47;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: top center;
  box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);
  border-radius: 5px;
  background-clip: padding-box;
  border: 1px solid #ebeef5;
}
.ipad_table {
  
  background-color: #f9f9f9;
  .control_box {
    padding: 0 20px;
    .header {
      font-size: 12px;
      color: #666;
      height: 30px;
      line-height: 30px;
      font-weight: 600;
    }
  }
}
@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
  .sbhy {
    margin-left: 0;
    margin-top: 10px;
  }
}
@media (max-width: 1182px) {
  .sbhy {
    margin-left: 0;
    margin-top: 32px;
  }
}
</style>